<template>
	<view class="bgf9">
		<view v-for="item in 3">
			<view style="height: 32rpx;"></view>
			<!-- 地址 -->
			<view class="w343" style=";color: #000000;line-height: 38rpx;">
				<view style="height: 98rpx;line-height: 98rpx;padding-left: 30rpx;border-bottom: 1rpx solid #f5f5f5;">
					订单编号：12346798
				</view>
				<view class="fs13" style="padding:14rpx 0 0 30rpx;font-weight: 700;">
					<text>李大钊</text>
				</view>
				<view class="fs12"
					style="padding: 16rpx 30rpx 16rpx 30rpx;color: rgba(136,136,136,1);border-bottom: 1rpx solid #f5f5f5;">
					<text>158****7856</text>
					<image class="dianhua" src="../../../static/icondianhua.png" mode=""></image> <br>
					<text>四川省成都市锦江区玉林路某小区A区15栋</text>
				</view>
			</view>
			<!-- 小计 -->
			<view class="w343">
				<view class="w90 fs14" style="height: 80rpx;line-height: 90rpx;">
					<h5>商品列表</h5>
				</view>
				<view class="w90" style="border-bottom: 1rpx solid rgba(243,243,243,1);">
					<view style="display: flex; margin: 30rpx 0" v-for="item in 2">
						<image src="../../../static/22.png"></image>
						<view style="margin-left: 30rpx;width: 70%;position: relative;color: rgba(184,184,184,1);">
							<view class="fs13" style="position: relative;">
								<text style="color: rgba(51,51,51,1);">赣南脐橙</text>
								<text style="position: absolute;right: 0;">￥8.8</text>
							</view>
							<text class="Ptc fs11">规格: 2斤</text><br>
							<text class="Ptc fs12">×2</text>
						</view>
					</view>
					<view class="fs12" style="color: rgba(177,177,177,1);padding-bottom: 16rpx;">
						<text>显示剩余3件商品</text>
						<image style="width: 20rpx;height: 10rpx;margin-left: 30rpx;" src="../../../static/iconxia.png"
							mode=""></image>
					</view>
				</view>
				<view class="w90 fs12">
					<view style="padding: 30rpx 0;">
						<view style="position: relative;line-height: 46rpx;">
							<text>配送费</text>
							<text class="redrt fs14">￥2.00</text>
						</view>
						<view style="position: relative;line-height: 46rpx;">
							<text>包装费</text>
							<text class="redrt fs14">￥299.88</text>
						</view>
						<view style="margin-top: 30rpx;position: relative;height: 64rpx; line-height: 64rpx;">
							<text style="color: rgba(168,168,168,1);">更多操作</text>
							<view class="jiedanDY">
								确认接单打印
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 自定义tabbar高度 -->
		<view style="height: 400rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.w343 {
		width: 686rpx;
		margin: 0 auto;
		background: #FFFFFF;
	}

	.w90 {
		width: 90%;
		margin: 0 auto;
	}

	.w90>view>image {
		width: 108rpx;
		height: 108rpx;
	}

	.redrt {
		color: rgba(255, 67, 67, 1);
		position: absolute;
		right: 8%;
	}

	.pofx {
		width: 100%;
		height: 170rpx;
		background: #FFFFFF;
		position: relative;
		left: 0;
		bottom: 0rpx;

	}

	.pobtm {
		width: 686rpx;
		height: 90rpx;
		border-radius: 90rpx;
		line-height: 90rpx;
		position: absolute;
		top: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		overflow: hidden;
	}

	.poleft {
		width: 492rpx;
		height: 90rpx;
		background: rgba(36, 188, 129, 1);
		position: relative;
		line-height: 30rpx;
		color: #FFFFFF;
	}

	.poright {
		width: 194rpx;
		height: 90rpx;
		background: #FFCB57;
		font-weight: 700;
		color: #333333;
	}

	.text33 {
		position: absolute;
		left: 130rpx;
		top: 10rpx;
	}

	.dianhua {
		width: 24rpx;
		height: 24rpx;
		float: right;
		margin-right: 8%;
	}

	.jiedanDY {
		width: 430rpx;
		height: 64rpx;
		text-align: center;
		line-height: 64rpx;
		border-radius: 8rpx;
		color: rgba(255, 255, 255, 1);
		background: linear-gradient(150deg, #2ed993 9%, #20b47a 100%);
		position: absolute;
		right: 0;
		top: 0;
	}
</style>
